<template>
  <t-tree
    ref="tree"
    :data="list"
    v-model:actived="actived"
    activable
    hover
    transition
    :expandMutex="true"
    :activeMultiple="false"
    :expandAll="false"
    :expandOnClickNode="true"
    :keys="threeKeys"
    @active="onActive"
  >
    <template #icon="{ node }"><i class="doorIcon" v-if="node.data.children.length > 0">&#xe664;</i></template>
    <template #operations="{ node }">
      <div class="editMenu">
        <t-popconfirm @cancel="cancel" @confirm="confirm">
          <template #content>
            <div class="input-box">
              <t-input v-model="parmas.name"></t-input>
            </div>
          </template>

          <i class="doorIcon" @click="append(node)">&#xe662;</i>
        </t-popconfirm>
        <!-- <t-popup
              attach="#three-id-001"
              overlayClassName="popup"
              class="placement top"
              content="添加子标签"
              placement="top"
              showArrow
              destroyOnClose
            >
            <template>

            </template>
              <i class="doorIcon" @click="append(node)">&#xe662;</i>
            </t-popup> -->
        <t-popup
          v-if="node.data.id !== 0"
          attach="#three-id-001"
          overlayClassName="popup"
          class="placement top"
          content="编辑标签"
          placement="top"
          showArrow
          destroyOnClose
        >
          <i class="doorIcon">&#xe65d;</i>
        </t-popup>
        <t-popup
          v-if="node.data.id !== 0"
          attach="#three-id-001"
          overlayClassName="popup"
          class="placement top"
          content="删除标签"
          placement="top"
          showArrow
          destroyOnClose
        >
          <i class="doorIcon" @click="remove(node.id)">&#xe634;</i>
        </t-popup>
      </div>
      <!-- <t-button :disabled="disableLabel" size="small" variant="base" @click="append(node)"> 添加子节点 </t-button>
          <t-button  size="small" variant="outline" @click="insertAfter(node)">
            后插节点
          </t-button>
          <t-button :disabled="disableLabel" size="small" variant="base" theme="danger" @click="remove(node)">
            删除
          </t-button> -->
    </template>
  </t-tree>
  <messageModel
    submitText="删除"
    title="提示"
    :visible="visible1"
    problem="确定删除此展览？"
    message="删除后可在回收站找回"
    @closeClick="closeClick"
    @submitClick="submitClick"
  />
</template>

<script setup lang="ts">
// @ts-nocheck
import { tagList, tagSave, delTag } from '@/api/tag/tag';
import moveDialog from './moveDialog.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { SettingType } from '@/api/model/project';
import messageModel from '@/components/messageModel/index.vue';
import { addsettings, transfer, projectDisable } from '@/api/project/project';
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { overview, projectRole } from '@/api/project/project';
import { useProjectStore, useUserStore } from '@/store';

const store = useProjectStore();
const route = useRoute();
const index = ref(2);
const expandIds = ref([]);
const tree = ref(null);
const userstore = useUserStore();
const router = useRouter();
const props = defineProps({
  role: {
    type: Number,
  },
});
const threeKeys = {
  value: 'id',
  label: 'name',
  children: 'children',
};
const parmas = reactive({
  id: 0,
  name: '',
  projectId: 0,
  parentId: 0,
  sort: 0,
  showpieceId: 0,
});
parmas.projectId = route.query.projectId;
const actived = ref([0]);

const list = ref([
  {
    name: '展品标签',
    id: 0,
    children: [],
  },
]);
const init = async () => {
  let { data } = await tagList(localStorage.getItem('projectId'));
  list.value[0].children = data;
  console.log(list.value);
};
init();
const append = (node) => {
  //新增子节点
  console.log(node);
  parmas.parentId = 0;

  // if (item) {
  //   if (!node) {
  //     tree.value.appendTo('', item);
  //   } else {
  //     tree.value.appendTo(node.value, item);
  //   }
  //   setLabel(item.value);
  // }
};
const addTag = () => {
  tagSave(parmas).then((res) => {
    if (res.data && res.statusCode === 200) {
      MessagePlugin.success('添加成功');
      init();
    }
  });
};
const cancel = () => {};
const confirm = () => {
  addTag();
};
const remove = (node) => {
  //删除节点
  tree.value.remove(node.value);
};

const onActive = (value, content) => {
  //激活状态
  actived.value = [content.node.data.id];
};
const handleDragStart = ({ node, e }) => {
  // console.log('handleDragStart', node.value, e);
};
const handleDragEnd = ({ node, e }) => {
  // console.log('handleDragEnd', node.value, e);
};
const handleDragOver = () => {};
const handleDragLeave = ({ node, e }) => {
  // console.log('handleDragLeave', node.value, e);
};
const handleDrop = ({ node, dropPosition, e }) => {
  // console.log('handleDrop', node.value, dropPosition, e);
};
const visible1 = ref(false);
const submitClick = async () => {
  try {
    visible1.value = false;
  } catch {}
  //点击删除
};
const closeClick = () => {
  visible1.value = false;
};
</script>

<style lang="less" scoped>
#three-id-001 {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
</style>
